<template>
  <div class="max-box">
    <van-nav-bar title="歌手分类" left-text="返回" border placeholder fixed left-arrow @click-left="onClickLeft" />
    <div class="keyword-box">
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(7,singerType)" :text-color="singerArea===7?'#f00':'#222'" plain>华 语</van-tag>
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(96,singerType)" :text-color="singerArea===96?'#f00':'#222'" plain>欧 美</van-tag>
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(8,singerType)" :text-color="singerArea===8?'#f00':'#222'" plain>韩 国</van-tag>
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(16,singerType)" :text-color="singerArea===16?'#f00':'#222'" plain>日 本</van-tag>
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(0,singerType)" :text-color="singerArea===0?'#f00':'#222'" plain>其 他</van-tag>
    </div>
    <div class="keyword-box">
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(singerArea,1)" :text-color="singerType===1?'#f00':'#222'" plain>男歌手</van-tag>
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(singerArea,2)" :text-color="singerType===2?'#f00':'#222'" plain>女歌手</van-tag>
      <van-tag round size="medium" class="tag" type="primary" @click="getSingerList(singerArea,3)" :text-color="singerType===3?'#f00':'#222'" plain>乐队/组合</van-tag>
    </div>
    <van-divider content-position="left">热门歌手</van-divider>
    <div class="singer-box">
      <div class="singer-item" v-for="item in hotSingerList" @click="toSinger(item.id)" :key="item.id">
        <div class="name">
          <van-image class="image" round width="1.2rem" height="1.2rem" :src="item.picUrl+'?param=160y160'" lazy-load />
          <p class="p">{{item.name}}</p>
        </div>
        <van-tag round size="large" type="danger" v-if="!item.followed" @click.stop="followSinger(item.id,1)">收藏</van-tag>
        <van-tag round size="large" plain type="danger" v-else @click.stop="followSinger(item.id,-1)">已收藏</van-tag>
      </div>
    </div>
  </div>
</template>

<script  type='module'>
export default {
  name: 'SingerPage',
  data () {
    return {
      // 热门歌手数据
      hotSingerList: [],
      // 获取热门歌手数据,默认参数
      singerType: 1,
      // 获取热门歌手数据,默认参数
      singerArea: 7
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 获取热门歌手数据函数
    async getSingerList (Area, type) {
      this.singerArea = Area || this.singerArea
      this.singerType = type || this.singerType
      const res = await this.$http({ url: '/artist/list', params: { type: this.singerType, area: this.singerArea, initial: -1 } })
      this.hotSingerList = []
      this.hotSingerList = res.artists.map(itme => ({
        id: itme.id,
        accountId: itme.accountId,
        name: itme.name,
        picUrl: itme.img1v1Url
      }))
      console.log(res)
    },
    // 收藏与取消收藏歌手
    async followSinger (SingerId, t) {
      // const { data: res } = await this.$http.get(`/artist/sub?id=${SingerId}&t=${t}`)
      // console.log(res)
      this.$notify({ type: 'success', message: '你收藏了该歌手' })
    },
    toSinger (SingerId) {
      if (!SingerId) {
        return this.$toast('没找到该歌手内容')
      }
      this.$router.push({ path: `/playmusic/${SingerId}` })
      // console.log(event.target)
    }
  },
  created () {
    // 调用获取热门歌手数据函数
    this.getSingerList()
  }
}
</script>

<style scoped lang="less">
.max-box {
  .keyword-box {
    .tag {
      margin: 5px 12px;
    }
  }
  .singer-box {
    .singer-item {
      display: flex;
      margin: 0px 12px 8px 12px;
      align-items: center;
      justify-content: space-between;
      .name {
        display: flex;
        justify-content: space-between;
        .p {
          line-height: 1.2rem;
          font-size: 15px;
          margin: 0px;
        }
        .image {
          margin-right: 15px;
        }
      }
    }
  }
}
// 标题颜色
//  /deep/
//  .van-ellipsis {
//   color: #0000ff;
// }

// /deep/
// .van-nav-bar .van-icon {
//   color: #0000ff;
// }
// /deep/ .van-nav-bar {
//   background-color: #ff0000;
//   // color: #0000ff;
// }
// /deep/
// .van-nav-bar__text {
//   color: #0000ff;
// }
</style>
